<template>
  <div ref="refBusinessCheck"
       v-empty="!canShowIndex"
       class="container"
       xs-empty-icon="nopermission"
       xs-empty-text="暂无权限">
    <div class="header">
      <i class="wk wk-customer"/>
      <span class="name">{{ data.row.customerName }}</span>
      <span class="detail">{{ `商机个数：（${list.length}）个` }}</span>
      <i class="el-icon-close close" @click="hideView"/>
    </div>
    <el-table v-loading="loading"
              :data="list"
              :cell-style="cellStyle"
              :header-cell-style="headerCellStyle"
              height="250"
              stripe
              highlight-current-row
              @row-click="handleRowClick">
      <el-table-column v-for="(item, index) in fieldList" :key="index"
                       width="100"
                       :prop="item.prop"
                       :label="item.label"
                       align="center"
                       header-align="center"
                       show-overflow-tooltip/>
    </el-table>
  </div>
</template>


<script setup>
/** 客户管理 的 客户列表  相关商机列表*/
import {crmCustomerQueryBusinessAPI} from "@/api/crm/customer.js";
import {useErpUserStore} from "@/store/modules/usererp.js";
import {ref, computed, watch, onMounted} from "vue"

defineOptions({
  name: 'BusinessCheck',
})

const props = defineProps({
  show: Boolean,
  data: {
    type: Object,
    default: () => {
      return {
        row: {
          name: ''
        }
      }
    }
  }
})

const emits = defineEmits(['close', 'click'])

const loading = ref(false)
const list = ref([])
const fieldList = ref([])
const refBusinessCheck = ref()

// 从store中拿到crm权限
const crm = computed(() => {
  const erpUserStore = useErpUserStore();
  return erpUserStore.crm
})

const canShowIndex = computed(() => {
  return crm.value.business && crm.value.business.index
})

watch(() => props.show, (val) => {
  if (
      canShowIndex.value && val &&
      props.data.row &&
      props.data.row.businessCount > 0 &&
      list.value.length == 0
  ) {
    getDetail()
  }
}, {
  deep: true,
  immediate: true
})


onMounted(() => {
  fieldList.value.push({
    prop: 'businessName',
    width: '200',
    label: '商机名称'
  })
  fieldList.value.push({
    prop: 'money',
    width: '200',
    label: '商机金额'
  })
  fieldList.value.push({
    prop: 'customerName',
    width: '200',
    label: '客户名称'
  })
  fieldList.value.push({prop: 'typeName', width: '200', label: '商机状态组'})
  fieldList.value.push({prop: 'statusName', width: '200', label: '状态'})
})


function getDetail() {
  loading.value = true
  crmCustomerQueryBusinessAPI({
    pageType: 0,
    customerId: props.data.row.customerId
  }).then(res => {
    loading.value = false
    list.value = res.data.data.list
  }).catch(() => {
    loading.value = false
  })
}


function hideView() {
  document.querySelector('#app').click()
  // emits('close', this.$el, props.data)
  emits('close', refBusinessCheck.value, props.data)
}

// 当某一行被点击时会触发该事件
function handleRowClick(row, column, event) {
  emits('click', row)
}

/** 通过回调控制style */
function cellStyle({row, column, rowIndex, columnIndex}) {
  return {fontSize: '12px', textAlign: 'center', cursor: 'pointer'}
}

function headerCellStyle({row, column, rowIndex, columnIndex}) {
  return {fontSize: '12px', textAlign: 'center'}
}
</script>


<style lang="scss" scoped>
.container {
  position: relative;
}

.header {
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  color: #333;

  .name {
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px 0 5px;

  }

  .detail {
    font-size: 12px;
  }

  .close {
    cursor: pointer;
    position: absolute;
    font-weight: 600;
    font-size: 18px;
    color: #909399;
    top: 0;
    right: 10px;
    padding: 10px;
  }
}

.wk-customer {
  color: $xr-color-primary;
  font-size: 12px;
}

.el-table {
  border-top: 1px solid $xr-border-line-color;
}
</style>
